<template>
  <view :class="[ 'ai-message-card', role ]">
    <view
        v-if="role === 'assistant'"
        class="ai-avatar"
    >
      <image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" mode="aspectFill"/>
    </view>
    <view class="message-wrap" v-if="message.text">
      <view class="message-time">{{ formatTime(message.time) }}</view>
      <view class="message">{{ message.text }}</view>
      <view class="message-bottom" v-if="role === 'assistant'">
        <AIButton text="币种分析" size="mini"></AIButton>
        <AIButton text="解锁高级服务" size="mini"></AIButton>
      </view>
    </view>

    <view class="loader" v-else>
      <view class="dot"></view>
      <view class="dot"></view>
      <view class="dot"></view>
    </view>
  </view>
</template>

<script>
import AIButton from './ai-button.vue'

export default {
  name: 'AIMessage',
  components: {
    AIButton
  },
  props: {
    role: {
      type: String,
      required: true,
      validator: (value) => ['user', 'assistant'].includes(value)
    },
    message: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  methods: {
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
      
      if (messageDate.getTime() === today.getTime()) {
        // 今天，只显示时间
        return date.toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit' 
        })
      } else {
        // 其他日期，显示完整日期时间
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes dot-flashing {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.4;
  }
}

.loader {
  display: flex;
  font-size: 48rpx;
  margin-left: 8rpx;
  align-items: center;
  height: 52rpx;
}

.dot {
  display: inline-block;
  animation: dot-flashing 1.2s infinite ease-in-out both;
  background: #333;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin: 0 4rpx;
}

.dot:nth-child(2) {
  animation-delay: 0.4s;
}

.dot:nth-child(3) {
  animation-delay: 0.8s;
}

.ai-message-card {
  display: flex;
  align-items: flex-start;

  + .ai-message-card {
    margin-top: 64rpx;
  }

  .ai-avatar {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .message {
    padding: 24rpx;
    color: #495057;
    background: #F8F9FA;
    font-size: 28rpx;
    line-height: 40rpx;
    border-radius: 16rpx;
    margin-top: 16rpx;
    word-wrap: break-word;
    word-break: break-all;
  }

  &.user {
    justify-content: flex-end;

    .message-wrap {
      margin-left: 0;
      align-items: flex-end;
    }
    
    .message {
      background: #4facfe;
      color: #fff;
    }
  }

  .message-wrap {
    display: flex;
    flex-direction: column;
    margin-left: 16rpx;
    max-width: calc(100vw - 200rpx);

    .message-time {
      font-size: 24rpx;
      line-height: 36rpx;
      color: #999;
    }

    .message-bottom {
      margin-top: 16rpx;
      display: flex;
      gap: 16rpx;
    }
  }
}
</style>
